<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>Pizza</title>
  <link rel="stylesheet" href="../pizza/css/ui.css?_t=1510195133000">
</head>
<body class="pz-contain">
  <h2>表单元素优化</h2>
  <hr class="fn-mt10">
  <div class="pz-boxhead fn-mt20">
    <em class="icon pz-icon icon-manageorder"></em>
    <span class='title'>下拉框（支持搜索）</span>
  </div>
  <div class="pz-boxbody fn-pd15">
    <h4>普通下拉框</h4>
    <select data-name="animal">
      <option class="1">猫</option>
      <option class="2">羊</option>
      <option class="3">金鱼</option>
      <option class="4">狗</option>
    </select>
    <select name="animal000" class="pz-select">
      <option class="1">猫</option>
      <option class="2">羊</option>
      <option class="3">金鱼</option>
      <option class="4">狗</option>
    </select>
    <h4 class="fn-mt10">禁用下拉框，支持&lt;optgroup&gt;分组标签></h4>
    <select name="animal123" disabled>
      <option value="1">狗</option>
      <option value="3">羊</option>
      <optgroup label="非生肖">
        <option value="2">猫</option>
        <option value="4">金鱼</option>
      </optgroup>
    </select>
    <select class='pz-select' name="animal123" disabled data-placeholder="选择你喜欢的动物">
      <option value="1">狗</option>
      <option value="3">羊</option>
      <optgroup label="非生肖">
        <option value="2">猫</option>
        <option value="4">金鱼</option>
      </optgroup>
    </select>
    <h4 class="fn-mt10">必选下拉框，可设置初值,支持搜索</h4>
    <select class='pz-select' name="fruit" form="myform" data-isSearch="true" data-placeholder="选择水果" data-defalutValue="0" data-notnull="true" data-value="2">
      <option value="1">菠萝</option>
      <optgroup label="红色">
        <option value="2">草莓</option>
        <option value="4">苹果</option>
      </optgroup>
      <optgroup label="绿色">
        <option value="3">西瓜</option>
        <option value="4">甜瓜</option>
      </optgroup>
    </select>
    <h4 class="fn-mt10">预留了钩子以便 为自动初始化的下拉组件绑定点击回调函数 详细用法见文档</h4>
    <p>pizzaCmd.selects</p>

    <!-- <input list="fruitlist" name="fave" id="fave" />
    <datalist id="fruitlist">
      <option value="Apples" label="Lovely Apples"></option>
      <option value="Oranges">Refreshing Oranges</option>
      <option value="Cherries"></option>
    </datalist> -->
  </div>
  <script type="text/javascript" src="//static.xinhuaapp.com/js/jquery-1.11.0-min.js"></script>
  <script type="text/javascript" src="//static.xinhuaapp.com/js/juicer-min.js"></script>
  <script type="text/javascript" src="../pizza/js/pizza.js?_t=1510649614000"></script>
</body>
</html>